<template>
  <div class="switchAccount">
    <img class="bg" src="@/assets/images/personal/info/switchABg.png" alt="">
    <div class="scrollContainer">
      <VScrollContainer ref="scrollContainer"
                        @scroll="scroll"
                        :enableScrollX="true"
                        :containerWidth="containerWidth">

        <div class="switchAccount-container">
          <div :class="[{active: focs[0]},'switchAccount-con']" data-index="tar_110-0">
            <img src="@/assets/images/personal/info/addAccount.png" alt="">
            <div style="margin-top: 53px;font-size: 35px;">新增账户</div>
          </div>
          <div :class="[{active: focs[index + 1]},'switchAccount-con']" v-for="(item, index) in students"
               :data-index="'tar_110-'+ (index+1)">
            <div class="name">{{item.name}}</div>
            <span class="class">班级:{{item.clazz.grade.name + item.clazz.name}}</span>
            <span class="student-id">学号:{{item.code}}</span>

            <span class="now" v-if="item.isCurrent">当前登录</span>
          </div>
        </div>
      </VScrollContainer>
    </div>

  </div>
</template>

<script>

  export default {
    name: "switchAccount",
    data() {
      return {
        bridge: this.$store.state.bridge,
        hs: this.$store.state.hs,
        scrollY: 0,
        scrollX: 0,
        focs: [false],
        students: [],
        containerWidth: 411
      }
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
        this.scrollX = pos.x;
      },
      getStudentList() {
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/student/list" +
          "?stbid=" + this.bridge.stbid,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.students = data.body
              // 初始化焦点
              this.students.forEach((item, index) => {
                new fObject(110, index + 1, null, null, null, '110-' + index, index < this.students.length - 1 ? '110-' + (index + 2) : null)
              })
              this.hs.fObjCommit()
            }
          }, 0, function (msg) {
          }, 3000
        );
        // 411 宽度, 50 偏移量
        this.containerWidth = (this.students.length + 1) * 411 + 50 + ''
      }
    },
    created() {
      this.getStudentList()

      new fObject(110, 0, null, null, null, null, '110-1')

      this.hs.fObjCommit()

      this.hs.addFocus([110], (group, objid, objindex) => {
          console.log(group + '-' + objindex)
          this.$set(this.focs, objindex, true)

          // if (this.students.length > 1 && objindex > 1) {
          // this.hs.direction === 4 ?
          // this.$refs.scrollContainer.scrollBy(-411, true) :
          // this.$refs.scrollContainer.scrollBy(411, true)

          // } else {
          //  this.$refs.scrollContainer.scrollBy(411, true)
          // }

          this.$refs.scrollContainer.$refs.scroll.scrollToElement(
            this.$refs.scrollContainer.$el.querySelectorAll("[data-index=tar_110-" + objindex + "]")[0], 1200, true
          )

        }
      )
      ;
      this.hs.addBlur([110], (group, objid, objindex) => {
        this.$set(this.focs, objindex, false)
      });

      // 处理所有点击逻辑
      this.hs.addSelect([110], (group, objid, objindex) => {
        if (objindex === 0) {
          this.$parent.showPersonal = true;
          setTimeout(() => {
            this.hs.initFocus("105-0");
          })
        } else {
          if (!this.students[objindex - 1].isCurrent) {
            this.hs.ajax.get(
              "http://" + this.$store.state.domain + "/SMSCH-STB/student/change" +
              "?stbid=" + this.bridge.stbid +
              "&username=" + this.students[objindex - 1].username,
              data => {
                data = JSON.parse(data);
                console.log(data);
                if (data.head.code === 1) {
                  this.$parent.msg = {msg: '切换账号成功!'};
                  // 更新学生信息
                  this.$store.commit("setUser", data.body);
                  // 关闭切换登录框
                  this.$parent.showSwitchAccount = false
                  setTimeout(()=>{
                    this.hs.initFocus('0-0')
                  },18)
                }
              }, 0, function (msg) {
              }, 3000
            );
          }
        }
      })

    },
    mounted() {
      this.hs.initFocus('110-0')
    }
  }
</script>

<style scoped lang="less">
  .switchAccount {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    .bg {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
    }
    .scrollContainer {
      /*position: absolute;*/
      /*left: 410px;*/
      /*top: 307px;*/
      margin-top: 307px;
      margin-left: 410px;
      width: 1100px;
      height: 534px;
      overflow: hidden;
    }
    .switchAccount-container {
      padding: 80px 50px 50px 50px;
      display: flex;
      flex: 0 0 auto;
      .switchAccount-con {
        width: 363px;
        height: 320px;
        background-color: #53cfff;
        border-radius: 8px;
        margin-right: 48px;
        flex: 0 0 auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        .name {
          flex: 0 0 auto;
          border-bottom: #104572 dashed 2px;
          width: 300px;
          height: 60px;
          line-height: 45px;
          font-size: 45px;
        }
        .class {
          flex: 0 0 auto;
          margin-top: 20px;
          width: 300px;
          height: 20px;
          line-height: 20px;
          font-size: 20px;
        }
        .student-id {
          flex: 0 0 auto;
          margin-top: 20px;
          width: 300px;
          height: 20px;
          line-height: 20px;
          font-size: 20px;
        }
        .now {
          flex: 0 0 auto;
          margin-top: 40px;
          width: 151px;
          height: 45px;
          background-color: #09508a;
          box-shadow: inset 2px 2px 7px 0px rgba(0, 0, 0, 0.35);
          border-radius: 23px;
          line-height: 45px;
          font-size: 26px;
          color: #fbff92;
          text-align: center;
        }
      }
    }

    .active {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      border: 2px solid #fff;
      background: #0e60e9;
    }
  }
</style>
